<template>
	<view class="card-body">
		<view class="card-top">
			<view class="card-top-item" v-if="avatar!=null">
				<cover-image class="card-avatar" :src="avatar"></cover-image>
			</view>
			<view class="card-top-item">
				<view class="author-name color-black" v-if="name!=null">
					<text>{{name}}</text>
				</view>
				<view class="notice-data color-gray" v-if="data!=null">
					<text>{{data}}</text>
				</view>
			</view>
			<view class="card-top-item" v-if="level!=null">
				<view class="card-badge color-white">
					<text>{{level}}</text>
				</view>
			</view>
		</view>
		<view class="card-bottom color-black">
			<image v-if="contentImg!=null" class="content-img" :src="contentImg" mode="aspectFit"></image>
			{{content}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "card",
		props: ["name", "data", "avatar", "level", "content", "contentImg"],
	}
</script>

<style lang="less" scoped>
	.card-body {
		background-color: white;
		box-shadow: 0px 0px 5px 0px #606266;
		width: 98%;
		padding: 10rpx;
		margin: 0 auto;
		border-radius: 10rpx;
	}

	.card-top-item:nth-child(1) {
		float: left;
	}

	.card-top-item {
		display: inline-block;
		margin: 10rpx;

		.card-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			border: 1rpx #409EFF solid;
		}

		.author-name {
			font-size: 26rpx;
		}

		.notice-data {
			margin-top: 10rpx;
			font-size: 15rpx;
		}

		.card-badge {
			padding: 7rpx 15rpx 7rpx 15rpx;
			font-size: 25rpx;
			background-color: #67C23A;
			border-radius: 30rpx;
		}
	}

	.card-bottom {
		text-indent: 1em;
		width: 80%;
		margin: 30rpx auto;
		word-break: break-all;
	}

	.content-img {
		height: 200rpx;
		width: 100%;
		float: left;
	}
</style>
